<template>
    <div class="single-table-container">
        <div class="search-form-wrapper">
            <div class="title">系统参数</div>
            <div class="seach_list">
                <el-input :prefix-icon="Search" placeholder="编码/值" v-model="searchForm.query" clearable></el-input>
                <el-button type="primary"  @click="searchTable">查询</el-button>
                <el-button type="primary" plain @click="addClick">新增</el-button>
            </div>
        </div>
        <div class="single-table">
            <el-table ref="table" v-loading="tableLoading" height="100%" :data="tableData" stripe tooltip-effect="dark"
                :header-cell-style="{ background: '#f5f7fa', fontWeight: 'bold', color: '#303133' }"
                highlight-current-row border>
                <el-table-column type="index" header-align="center" align="center" label="序号"
                    width="60"></el-table-column>
                <el-table-column prop="paramCode" label="参数编码" show-overflow-tooltip
                    :formatter="formartEmpty"></el-table-column>
                <el-table-column prop="paramValue" label="参数值" show-overflow-tooltip
                    :formatter="formartEmpty"></el-table-column>
                <el-table-column prop="remark" label="描述" show-overflow-tooltip
                    :formatter="formartEmpty"></el-table-column>
                <el-table-column prop="createDate" label="创建时间" show-overflow-tooltip
                    :formatter="formartDateEmpty"></el-table-column>
                <el-table-column prop="updateDate" label="修改时间" show-overflow-tooltip
                    :formatter="formartDateEmpty"></el-table-column>
                <el-table-column label="操作" header-align="center" align="center" width="180">
                    <template #default="scope">
                        <el-button size="small" type="primary" link @click="editRow(scope.row)">编辑</el-button>
                        <el-button size="small" class="g-red" type="primary" link @click="deleteRow(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="table-pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                :current-page="pages.current" :page-sizes="pages.pageSizeList" :page-size="pages.size"
                layout="total, sizes, prev, pager, next, jumper" :total="pages.total"></el-pagination>
        </div>
        <addOrEdit ref="addOrEditRef" @search-table="searchTable"></addOrEdit>
    </div>

</template>
<script setup lang="ts" name="sysCconfig">
import { Search } from '@element-plus/icons-vue'
import { delNullProperty } from "@/utils/index.ts";
import { ref, onMounted } from 'vue';
import { getConfigListByPage, deleteSysConfigById } from "@/api/sys/configApi.ts";
import addOrEdit from "./_compoents/addOrEdit.vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import { formartEmpty, formartDateEmpty } from "@/utils";

const addOrEditRef = ref(addOrEdit);
const searchForm = ref({
    query: '',
});
const tableLoading = ref(false);
const tableData = ref([]);
const pages = ref({
    current: 1,
    size: 10,
    pageSizeList: [10, 20, 30, 50, 100],
    total: 0
})
/*生命周期 */
onMounted(() => {
    getTableData();
})
/*方法 */
const addClick = () => {
    // 新增
    if (addOrEditRef.value) {
    }
    addOrEditRef.value.openLoad("add");
}
const editRow = (row: any) => {
    addOrEditRef.value.openLoad("update", row);
}
const deleteRow = async (row: any) => {
    ElMessageBox.confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
        await deleteRowAction(row);
    })

}
const deleteRowAction = async (row: any) => {
    const id = row.id;
    tableLoading.value = true;
    const res: apiServerResponse = await deleteSysConfigById(id)
    if (res.code == 200) {
        ElMessage({
            message: '删除成功',
            type: 'success',
        })
        searchTable();
    }
    tableLoading.value = false;
}
const getTableData = () => {
    tableLoading.value = true;
    let params = {
        current: pages.value.current,
        size: pages.value.size,
        ...delNullProperty(searchForm.value)
    }
    getConfigListByPage(params).then((res: any) => {
        if (res.code == 200) {
            tableData.value = res.result.records;
            pages.value.total = res.result.total;
        }
        tableLoading.value = false;

    })
}
const searchTable = () => {
    pages.value.current = 1;
    getTableData();
}
const handleSizeChange = (val: number) => {
    pages.value.size = val;
    getTableData();
}
const handleCurrentChange = (val: number) => {
    pages.value.current = val;
    getTableData();
}
</script>